<template>
  <div class="order-main">
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <!-- card body -->
      <el-form label-width="80px" style="margin: -10px; margin-bottom: -20px;" size="mini">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号">
              <el-input v-model="OrderQueryVo.orderSn" placeholder="填写订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单类型">
              <el-select v-model="OrderQueryVo.orderType" clearable placeholder="请选择订单类型">
                <el-option
                  v-for="item in orderType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="支付方式">
              <el-select v-model="OrderQueryVo.payType" clearable placeholder="请选择支付方式">
                <el-option
                  v-for="item in payType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单状态">
              <el-select v-model="OrderQueryVo.status" clearable placeholder="请选择订单类型">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="display: flex; justify-content: flex-end; margin-right: 50px;">
          <el-button style="margin-right: 10px;" type="primary" @click="getSearchOrder">搜索</el-button>
          <el-button @click="getResetCeach">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <template>
        <el-table :data="list" border stripe>
          <el-table-column
            label="#"
            align="center"
            fixed="left"
            type="index"
            width="50"
          />
          <el-table-column
            prop="orderSn"
            align="center"
            label="订单编号"
            width="180"
          />
          <el-table-column
            align="center"
            label="支付方式"
            width="130"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.payType==0" type="info" effect="dark">未支付</el-tag>
              <el-tag v-else-if="scope.row.payType==1" effect="dark">支付宝</el-tag>
              <el-tag v-else-if="scope.row.payType==2" type="success" effect="dark">微信</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="订单状态"
            width="130"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0" effect="plain">待付款</el-tag>
              <el-tag v-else-if="scope.row.status==1" type="warning" effect="dark">待发货</el-tag>
              <el-tag v-else-if="scope.row.status==2" type="success" effect="plain">已发货</el-tag>
              <el-tag v-else-if="scope.row.status==3" type="success" effect="dark">已完成</el-tag>
              <el-tag v-else-if="scope.row.status==4" type="danger" effect="dark">退货</el-tag>
              <el-tag v-else-if="scope.row.status==5" type="info" effect="plain">无效订单</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="添加时间"
            width="180"
          />
          <el-table-column
            prop="memberUsername"
            align="center"
            label="用户账号"
            width="130"
          />
          <el-table-column
            align="center"
            label="订单类型"
            width="130"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deleteStatus==0">正常订单</el-tag>
              <el-tag v-else-if="scope.row.deleteStatus==1" type="danger">限时订单</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            align="center"
            label="备注"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goCheckOrde(scope.row.id)"><i class="el-icon-view" style="margin-right: 10px;" />查看订单</el-button>
            </template>
          </el-table-column>
        </el-table>

      </template>

      <div class="block">
        <el-pagination
          style="margin-top: 10px; text-align: center;"
          :current-page="start"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import { findOrdersByPage } from '@/api/order'

import mix from '@/mixins'
export default {
  name: 'OrderList',
  mixins: [mix],
  data() {
    return {
      orderType: [
        {
          label: '正常订单',
          value: 0
        },
        {
          label: '秒杀订单',
          value: 1
        }
      ],
      payType: [
        {
          label: '未支付',
          value: 0
        },
        {
          label: '支付宝',
          value: 1
        },
        {
          label: '微信 ',
          value: 2
        }
      ],
      status: [
        {
          label: '待付款',
          value: 0
        },
        {
          label: '待发货',
          value: 1
        },
        {
          label: '已发货',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        },
        {
          label: '退货',
          value: 4
        },
        {
          label: '无效订单',
          value: 5
        }
      ],
      OrderQueryVo: {},
      list: []
    }
  },

  mounted() {
    this.getOrderList()
  },

  methods: {
    // 前往详情页
    async goCheckOrde(id) {
      this.$router.push({ name: 'DetailPage', params: { id }})
    },

    // 查找订单
    getSearchOrder() {
      this.getOrderList()
    },
    // 重置表单
    getResetCeach() {
      this.OrderQueryVo = this.$options.data().OrderQueryVo
      this.start = 1
      this.getOrderList()
      // console.log(this.$options.data())
    },

    /**
     * 获取订单列表
     */
    async getOrderList() {
      const res = await findOrdersByPage(this.start, this.limit, this.OrderQueryVo)
      console.log(res)
      const { success, message, data: { rows }} = res
      if (success) {
        this.list = rows
        this.total = res.data.total
      } else {
        this.$message.error(message)
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val
      this.start = 1
      this.getOrderList()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.start = val
      this.getOrderList()
      // console.log(`当前页: ${val}`);
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
